<template>
  <div class="preview" v-show="isShow">
    <img 
    @click.stop="close"
    src="../../assets/img/preview/close.svg" 
    alt="">
    <div class="bg" ></div>
    <div class="big" @click.stop="close">
      <img :src="big" alt="">
    </div>
    <div class="small">
      <img 
      @click.stop="changeImg(item)"
      v-for="(item,index) in img" 
      :src="item" 
      alt="" >
    </div>
  </div>
</template>

<script>

export default {
  name: '',
  data () {
    return {
      img:[],
      big:'',
      isShow:false,
    }
  },
  methods:{
    show(img){
      console.log(img)
      this.img = img
      this.big = img[0]
      this.isShow = true
    },
   changeImg(item){
    this.big = item
   },
   close(){
    this.isShow = false
   }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.preview{
 /* overflow: hidden; */
 overscroll-behavior: contain;
 position: fixed;
 top: 20%;
 left: 0;
 right: 0;
 z-index: 999;
 width: 100%;
 /* height: 100vh; */
 background-color: #fff;
}
.bg{
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 z-index: -1;
 width: 100%;
 height: 100vh;
 background-color:rgba(12, 12, 12, 0.9);
}
.big{
 /* margin-top: auto; */
 width: 100%;
 height: 375px;
 overflow: hidden;
 /* height: 50%; */
}
.big img{
  width: 100%;
}
.small{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -100px;
  /* width: 100px; */
  padding: 0px 5px;
  width: 100%;
  height: 100px;
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;
}
.small img{
  width: 100px;
  height: 100px;
  border-radius: 5px;
  border: 2px solid #fff;
}
</style>